<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width, height=device-height" />

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/sdsway2_style.css"/>

<!-- JavaScript -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/common.js" charset="utf-8"></script>
<script type="text/javascript" src="js/remocon.js" charset="utf-8"></script>

<title>아바타 리모콘</title>
</head>
<body>
	<span id="debug"></span>

	<input type="hidden" id="ptId" name="ptId" value="1" />
	<input type="hidden" id="pollId" name="pollId" />
	<input type="hidden" id="avatarId" name="avatarId" value="${avatarVO.avatarId}" />
	<input type="hidden" id="initAvatarType" name="initAvatarType" value="${avatarVO.avatarType}" />

	<table class="remoconUserInfoTable" summary="userInfoTable">
		<caption style="display:none;">USER_INFO</caption>
		<colgroup>
			<col width="60px;" />
			<col width="" />
		</colgroup>
		<tbody>
			<tr>
				<th>
					<span id="avatarIdSpan" style="font-size:20px; font-weight:bold;">${avatarVO.avatarId}</span>
				</th>
				<td class="scoreTd">
					<span id="geniusSpan" style="font-size:16px; font-weight:bold; color:red; text-decoration:blink; display:none;">오오 1등!&nbsp;</span>
					<span id="stupidSpan" style="font-size:16px; font-weight:bold; color:red; text-decoration:blink; display:none;">꼴찌ㅠㅠ&nbsp;</span>
					<span style="font-size:18px; font-weight:bold; color:blue;">
						<span id="avatarScoreSpan">${avatarVO.avatarScore}</span>&nbsp;점&nbsp;
					</span>
					(<span id="rankSpan" style="font-size:18px; font-weight:bold;">${rank}</span>
					/<span id="totalSpan" style="font-size:14px;">${total}</span>)
				</td>
			</tr>
		</tbody>
	</table>
	<table class="remoconAvatarTable" summary="avatarTable">
		<caption style="display:none;">AVATAR</caption>
		<colgroup>
			<col width="20%" />
			<col width="20%" />
			<col width="20%" />
			<col width="20%" />
			<col width="20%" />
		</colgroup>
		<tbody id="avatarTypeRadioTbody">
<%//LINE %><tr><td colspan="5" class="skyTopLineTd" /></tr>
			<tr>
				<td>
					<input type="radio" id="avatarType10" name="avatarType" value="10">
					<label for="avatarType10"><img src="img/cat1.png" style="width:20px;height:20px;"></label>
				</td>
				<td>
					<input type="radio" id="avatarType20" name="avatarType" value="20">
					<label for="avatarType20"><img src="img/chicken1.png" style="width:20px;height:20px;"></label>
				</td>
				<td>
					<input type="radio" id="avatarType30" name="avatarType" value="30">
					<label for="avatarType30"><img src="img/dog1.png" style="width:20px;height:20px;"></label>
				</td>
				<td>
					<input type="radio" id="avatarType40" name="avatarType" value="40">
					<label for="avatarType40"><img src="img/monkey1.png" style="width:20px;height:20px;"></label>
				</td>
				<td>
					<input type="radio" id="avatarType50" name="avatarType" value="50">
					<label for="avatarType50"><img src="img/mouse1.png" style="width:20px;height:20px;"></label>
				</td>
			</tr>
			<tr>
				<td>
					<input type="radio" id="avatarType60" name="avatarType" value="60">
					<label for="avatarType60"><img src="img/pig1.png" style="width:20px;height:20px;"></label>
				</td>
				<td>
					<input type="radio" id="avatarType70" name="avatarType" value="70">
					<label for="avatarType70"><img src="img/rabbit1.png" style="width:20px;height:20px;"></label>
				</td>
				<td>
					<input type="radio" id="avatarType80" name="avatarType" value="80">
					<label for="avatarType80"><img src="img/bomb.gif" style="width:20px;height:20px;"></label>
				</td>
				<td>
					<input type="radio" id="avatarType90" name="avatarType" value="90">
					<label for="avatarType90"><img src="img/avatar1.gif" style="width:20px;height:20px;"></label>
				</td>
				<td>
					<input type="radio" id="avatarType110" name="avatarType" value="110">
					<label for="avatarType110"><img src="img/omnom1.png" style="width:20px;height:20px;"></label>
				</td>
			</tr>
<%//LINE %><tr><td colspan="5" class="skyTopLineTd" /></tr>
		</tbody>
	</table>
	
<!-- 	<div id="joystick" style="width:200px;height:200px;background-color:#FBDA5C"> -->
<!-- 	</div> -->
	
	<div id="subPollDiv" class="remoconDiv">
		<div style="padding-top:10px;"><label id="qstVal" for="aswVal" class="remoconLabel">(문제)</label></div>
		<div style="padding-top:10px;"><input type="text" id="aswVal" class="mobileInputText" placeholder="무엇이든 질문해주세요~!" maxlength="20" /></div>
		<div style="padding-top:10px;"><input type="button" class="mobileInputButton" value="전송" onclick="submitAsw();return false;" /></div>
	</div>
	<canvas id="remoconCanvas" width="300px" height="300px" style="position:absolute; top:110px; left:10px;"></canvas>

	<div id="practiceDiv" class="remoconDiv">
		<div style="padding-top:10px;"><label id="practiceActionMessage" class="remoconLabel">따라 하시구료</label></div>
		<div style="padding-top:10px;"><input id="closePracticeBtn" type="button" value="종료" onclick="closePractice();" style="display:none;" /></div>
	</div>

<!-- 	<table class="remoconTb"> -->
<!-- 		<tr> -->
<!-- 			<td class="buttonTd" id="btnUpLeft"></td> -->
<!-- 			<td class="buttonTd" id="btnUp">상</td> -->
<!-- 			<td class="buttonTd" id="btnUpRight"></td> -->
<!-- 		</tr> -->
<!-- 		<tr> -->
<!-- 			<td class="buttonTd" id="btnLeft">좌</td> -->
<!-- 			<td></td> -->
<!-- 			<td class="buttonTd" id="btnRight">우</td> -->
<!-- 		</tr> -->
<!-- 		<tr> -->
<!-- 			<td class="buttonTd" id="btnDownLeft"></td> -->
<!-- 			<td class="buttonTd" id="btnDown">하</td> -->
<!-- 			<td class="buttonTd" id="btnDownRight"></td> -->
<!-- 		</tr> -->
<!-- 	</table> -->
	
	<div id="monitor">
	</div>
</body>
</html>